<template>
  <div class="notice">
    <GhNavBar title="系统公告"  />
  <div class="list">
    <van-list v-if="items.length > 0">
        <van-cell v-for="announcement in items" :key="announcement.id" class="announcement-item" @click="goToAnnouncement(announcement)">
            <div class="title">{{ announcement.title }}</div>
            <div class="auth-label-bottom">
                <div class="author">{{announcement.author}}</div>
                <div class="label">{{ announcement.updated_at }}</div>
            </div>
        </van-cell>
      </van-list>
      <van-empty v-else description="暂无系统公告" />
  </div>
 
   <div class="notice-detail" v-if="dialogVisible"  >
       <div class="detail-title">{{item.title}}</div>
       <div class="detail-content">通知：{{item.content}}</div>
       <div class="auth-time-box">
             <div class="detail-author">发布者：{{item.author}}</div>
             <div class="detail-updated_at">{{item.updated_at}}</div>
       </div>
       <van-button  native-type="submit" @click="close" block round type="primary">
        我已知晓
      </van-button>
   </div>
</div> 
   
</template>

<script setup>
import GhNavBar from '@/components/gh-nav-bar.vue'
import {ref,reactive,onMounted} from "vue"
import {getAllNotice} from '@/services/others'

const items=ref([])
onMounted(async()=>{
    const res =await getAllNotice()
    // console.log(res.data)
    items.value=res.data
})

const item =ref([])
const dialogVisible=ref(false)
 // 跳转到公告详情页
 const goToAnnouncement = (announcement) => {
      // 在这里实现跳转逻辑，例如使用路由库进行页面跳转
      dialogVisible.value=true
    //   console.log('跳转到公告详情页', announcement);
      item.value=announcement

    };

 //关闭公告
 const close=()=>{
    dialogVisible.value=false
 }   


</script>

<style lang="scss" scoped>
.notice{
    .list{
     margin-top: 40px;
     padding: 10px;
     .announcement-item {
      background-color:var(--gh-primary);
      border-radius: 15px;
      margin-bottom: 6px;
      font-family: '宋体';
      .title {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 5px;
      }
      .auth-label-bottom{
        display: flex;
        justify-content: space-between;
        .author{
            font-size: 14px;
            color: #f5f5f5;
        }
        .label {
            font-weight: bold;
        font-size: 12px;
        color:var(--gh-price);
      }
      }
     
    }
  
    }
    .notice-detail{
        position: fixed;
        text-align: center;
        width: 300px;
        border-radius: 40px;
        background-color: #f5f5f5;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        .detail-title{
            font-size: 20px;
            font-weight: bold;
            font-family: '宋体';
            margin: 10px 0;
            border-bottom:#555 1px solid ;
        }
        .detail-content{
            font-family: '幼圆';
            margin-bottom: 10px;
            font-size: 16px;
            max-height: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            padding:0 25px;
        }
        .auth-time-box{
            margin-top: 20px;
            color: var(--gh-price);
            padding: 0 25px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }
        .van-button{
            position: relative;
            width: 50%;
            left: 50%;
            transform: translate(-50%);
            margin: 10px 0 20px;
        }
    }
}


</style>
